<template>
  <div class="app-container">
    <el-tabs v-model="activeTab" @tab-click="handleTabClick">
      <el-tab-pane label="垃圾回收汇款记录" name="transaction">
        <div class="search-bar">
          <el-form ref="queryFormRef" :model="transactionQueryParams" :inline="true">
            <el-form-item label="汇款方" prop="fromUserStr">
              <el-input v-model="transactionQueryParams.fromUserStr" placeholder="汇款方"
                @keyup.enter="loadTransactionHistory()" />
            </el-form-item>
            <el-form-item label="收款方" prop="toUserStr">
              <el-input v-model="transactionQueryParams.toUserStr" placeholder="收款方"
                @keyup.enter="loadTransactionHistory()" :disabled="userStore.judgeNormalUser()" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="loadTransactionHistory">
                <template #icon>
                  <Search />
                </template>
                搜索
              </el-button>
              <el-button @click="resetTransactionQuery">
                <template #icon>
                  <Refresh />
                </template>
                重置
              </el-button>
            </el-form-item>
          </el-form>
        </div>

        <el-card shadow="never">
          <el-table ref="dataTableRef" v-loading="loading" :data="pageData" highlight-current-row border
            @selection-change="handleSelectionChange">
            <el-table-column key="id" label="编号" prop="id" min-width="150" align="center" />
            <el-table-column key="requestId" label="申请编号" prop="requestId" min-width="150" align="center" />
            <el-table-column key="fromUserStr" label="汇款方" prop="fromUserStr" min-width="150" align="center" />
            <el-table-column key="toUserStr" label="收款方" prop="toUserStr" min-width="150" align="center" />
            <el-table-column key="amount" label="交易金额/元" prop="amount" min-width="150" align="center" />
            <el-table-column key="createTime" label="交易时间" prop="createTime" min-width="150" align="center" />
          </el-table>

          <pagination v-if="total > 0" v-model:total="total" v-model:page="transactionQueryParams.pageNum"
            v-model:limit="transactionQueryParams.pageSize" @pagination="loadTransactionHistory()" />
        </el-card>
      </el-tab-pane>

      <el-tab-pane label="余额充值记录" name="recharge">
        <div class="search-bar">
          <el-form ref="rechargeQueryFormRef" :model="rechargeQueryParams" :inline="true">
            <el-form-item label="用户名" prop="username">
              <el-input v-model="rechargeQueryParams.username" placeholder="用户名" @keyup.enter="loadRechargeHistory()"
                :disabled="userStore.judgeNormalUser()" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="loadRechargeHistory">
                <template #icon>
                  <Search />
                </template>
                搜索
              </el-button>
              <el-button @click="handleResetRechargeQuery">
                <template #icon>
                  <Refresh />
                </template>
                重置
              </el-button>
            </el-form-item>
          </el-form>
        </div>

        <el-card shadow="never">
          <el-table v-loading="rechargeLoading" :data="rechargeData" highlight-current-row border>
            <el-table-column key="orderNo" label="订单号" prop="orderNo" min-width="150" align="center" />
            <el-table-column key="amount" label="充值金额/元" prop="amount" min-width="150" align="center" />
            <el-table-column key="payType" label="支付方式" prop="payType" min-width="150" align="center">
              <template #default="scope">
                <el-tag v-if="scope.row.payType === 1" type="success">微信</el-tag>
                <el-tag v-else-if="scope.row.payType === 2" type="primary">支付宝</el-tag>
                <el-tag v-else-if="scope.row.payType === 3" type="danger">银行卡</el-tag>
              </template>
            </el-table-column>
            <el-table-column key="status" label="支付状态" prop="status" min-width="150" align="center">
              <template #default="scope">
                <el-tag v-if="Number(scope.row.amount) < 1" type="danger">已提现</el-tag>
                <el-tag v-else-if="scope.row.status === 0" type="warning">待支付</el-tag>
                <el-tag v-else-if="scope.row.status === 1" type="success">已支付</el-tag>
                <el-tag v-else-if="scope.row.status === 2" type="info">已取消</el-tag>
              </template>
            </el-table-column>
            <el-table-column key="payTime" label="支付时间" prop="payTime" min-width="150" align="center" />
          </el-table>
          <pagination v-if="total > 0" v-model:total="total" v-model:page="rechargeQueryParams.pageNum"
            v-model:limit="rechargeQueryParams.pageSize" @pagination="loadRechargeHistory()" />
        </el-card>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: "Transaction",
  inheritAttrs: false,
});

import TransactionAPI, { TransactionPageVO, TransactionForm, TransactionPageQuery } from "@/api/system/transaction";
import UserAPI, { RechargeHistoryVO } from "@/api/system/user";
import { useUserStore } from '@/store/index'

const userStore = useUserStore();
const queryFormRef = ref();
const rechargeQueryFormRef = ref();
const dataFormRef = ref();

const loading = ref(false);
const rechargeLoading = ref(false);
const removeIds = ref<number[]>([]);
const total = ref(0);

// 当前激活的标签页
const activeTab = ref('transaction');

// 充值记录查询参数
const rechargeQueryParams = reactive({
  username: '',
  pageNum: 1,
  pageSize: 10,
});

const transactionQueryParams = reactive<TransactionPageQuery>({
  pageNum: 1,
  pageSize: 10,
});

// 交易记录表表格数据
const pageData = ref<TransactionPageVO[]>([]);

// 充值记录表格数据
const rechargeData = ref<RechargeHistoryVO[]>([]);

/** 标签页切换处理 */
function handleTabClick() {
  if (activeTab.value === 'transaction') {
    loadTransactionHistory();
  } else if (activeTab.value === 'recharge') {
    loadRechargeHistory();
  }
}

/** 加载充值记录 */
function loadRechargeHistory() {
  if (userStore.judgeNormalUser()) {
    rechargeQueryParams.username = userStore.userInfo.username || '';
  }
  rechargeLoading.value = true;
  const userId = userStore.judgeNormalUser() ? userStore.userInfo.userId : undefined;
  UserAPI.queryRechargeHistory(userId, rechargeQueryParams.pageNum, rechargeQueryParams.pageSize, rechargeQueryParams.username)
    .then((data) => {
      rechargeData.value = data.list;
      total.value = data.total;
    })
    .finally(() => {
      rechargeLoading.value = false;
    });
}

/** 重置充值记录查询 */
function handleResetRechargeQuery() {
  rechargeQueryFormRef.value?.resetFields();
  loadRechargeHistory();
}

/** 加载交易记录历史 */
function loadTransactionHistory() {
  if (userStore.judgeNormalUser()) {
    transactionQueryParams.toUserStr = userStore.userInfo.username;
  }
  loading.value = true;
  TransactionAPI.getPage(transactionQueryParams)
    .then((data) => {
      pageData.value = data.list;
      total.value = data.total;
    })
    .finally(() => {
      loading.value = false;
    });
}

/** 重置交易记录查询 */
function resetTransactionQuery() {
  queryFormRef.value!.resetFields();
  transactionQueryParams.pageNum = 1;
  loadTransactionHistory();
}

/** 行复选框选中记录选中ID集合 */
function handleSelectionChange(selection: any) {
  removeIds.value = selection.map((item: any) => item.id);
}

onMounted(() => {
  loadTransactionHistory();
});
</script>
